<script setup>
import photo from './photo.vue';
import hot from './hot.vue';
// 创建一个响应式对象
/* 
    子组件中的数据通常不会在子组件中直接定义，这样会导致数据和视图发生耦合
    子组件中的数据通常会在创建组件实例式确定
    父组件可以通过 props 来将数据传给子组件

    使用props
        -现在子组件中定义props
*/
const props = defineProps(["singerinfo","maxProgress"])
const singerinfo = props.singerinfo
</script>
<template>
  <div class="singer">
    <!--照片 -->
    <photo :img="singerinfo.img" :name="singerinfo.name" :rank="singerinfo.rank"></photo>
    <!-- 描述 -->
    <div class="progress-wrp">
      <div class="name">{{ singerinfo.name }}</div>
      <hot :progress="singerinfo.progress"
           :maxProgress="props.maxProgress"
           ></hot>
      
    </div>
  </div>
</template>

<style scoped>
.singer {
  display: flex;
  margin-bottom: 20px;
}

/* 图片容器 */

.progress-wrp {
  display: flex;
  /* 弹性盒垂直排列 */
  flex-flow: column;
  color: #fff;
  font-size: 17px;
  justify-content: space-evenly;
  margin-left: 15px;
  flex: auto;

}

</style>